<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <!-- 这2个 <meta> 标签只适用于 AngularJS 框架.
          JavaScript frameworks like AngularJS will automatically include the actual CSRF token in the HTTP request headers.
          但不适用于jQuery。
        <meta name="_csrf" content="4bfd1575-3ad1-4d21-96c7-4ef2d9f86721"/>
        <meta name="_csrf_header" content="X-CSRF-TOKEN"/>
          -->

    </head>
    <body>
        Test
        <br/>
        <div>
            <!--<button id="test" onclick="showName1();"> show </button>-->
            <button id="test"> show </button>
        </div>
        <br/>
        <div id="show"></div>
        <br>
        document.cookie:
        <div id="cookie"></div>
        <div id="token"></div>
        <br/>
        <!--<div>
            待上传文件：<input type="file" id="upload" name="upload"/>
        </div>-->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                /*
                 jQuery的整合 csrf token 到 ajax请求头中的方法  X-XSRF-TOKEN
                前端cookie示例：Cookie: remember-me=dXNlcjM6MTY1Mjc4NDc0ODc4MTozM2Q1OWVjZGQ3ZTZkZTA5NzU3ODkyZjgxNzI1ZDBlNg; JSESSIONID=A26425501EEC457ED145EB103E296D64; XSRF-TOKEN=9c2a2d8a-23b1-4db3-81ef-9fa9e9736791
                */
                // alert(document.cookie);
                $("#cookie").html(document.cookie);
                // var header = "X-CSRF-TOKEN";
                // var header = "_csrf";
                // var header = "XSRF-TOKEN";
                // var header = "X-CSRFToken";
                var header = "X-XSRF-TOKEN"; // 测试了好几次，终于被我测试到了正确的请求header中的csrf键名称
                var regex = /.*XSRF-TOKEN=([^;.]*).*$/;
                token = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
                $("#token").html(token);

                $(document).ajaxSend(function(e, xhr, options) {
                    // 整合 csrf token 到 ajax 请求头中
                    xhr.setRequestHeader(header, token);
                });
                /*
                 ERROR: ajax的post请求一直报错: {"timestamp":"2022-05-07T09:21:44.890+00:00","status":403,"error":"Forbidden","path":"/test"}
                 RCA1: 语法错误， $("#test").click()的最后没有写分号“;”
                 SOLUTION: 在末尾添加上分号，就好了。
                 REEOR2: 然后我启动了 csrf 保护，又开始报该错误了。
                 RCA2：这次是因为开启了CSRF保护功能。
                 SOLUTION: 发送请求时，需要在 请求header中放置键值对 X-XSRF-TOKEN=9c2a2d8a-23b1-4db3-81ef-9fa9e9736791
                            而该 X-XSRF-TOKEN 的值来源于Cookie中的XSRF-TOKEN，这是服务端自动生成后放在Cookie中的，且每次请求都会变更。
                */
                $("#test").click(function() {
                    // alert("click test to show a name111.");
                    $.post('/test', {'name': 'zhangsan'},
                        function (res) {
                            $('#show').html(res);
                        }, 'text');
                });
                /*
                button的onclick中设置的函数不生效，控制台报错：function showName1() is not defined.
                RCA: 是语法错误。
                引入的jquery，本来应该写成 <script type="text/javascript" src="js/jquery.min.js">< /script>，
                我写成了 <script type="text/javascript" src="js/jquery.min.js"/>，就为了偷懒想少写一个< /script>标签
                function showName1() {
                    alert("click test to show a name1.");
                }*/
            });
        </script>
    </body>
</html>